<ion-header>
    <ion-toolbar>
        <ion-buttons slot="start">
            <ion-back-button></ion-back-button>
        </ion-buttons>
        <ion-title>修改密码</ion-title>
    </ion-toolbar>
</ion-header>

<ion-content>
    <form (ngSubmit)="formSubmit()" #ngForm="ngForm" class="myForm" validator-password-identical>
        <ion-list>
            <ion-item>
                <ion-label required>旧密码</ion-label>
                <ion-input type="password" name="oldPsw" autocomplete="off" placeholder="请输入旧密码（必填）"
                           [(ngModel)]="model.oldPsw" #oldPsw="ngModel" required></ion-input>
            </ion-item>
            <div *ngIf="oldPsw.invalid && oldPsw.dirty" class="form-invalid-tip">
                <div *ngIf="oldPsw.errors.required">密码是必填项</div>
            </div>

            <ion-item>
                <ion-label required>新密码</ion-label>
                <ion-input type="password" name="password" autocomplete="off" placeholder="请输入新密码（必填）"
                           [(ngModel)]="model.password" #password="ngModel" required
                           (input)="checkPass($event.target.value)" pattern=".{6,20}"></ion-input>
                <div class="strength" *ngIf="pswLeave">
                    <span>密码强度：</span>
                    <span class="high" *ngIf="pswLeave==='high'">高</span>
                    <span class="middle" *ngIf="pswLeave==='middle'">中</span>
                    <span class="low" *ngIf="pswLeave==='low'">低</span>
                </div>
            </ion-item>
            <div *ngIf="password.invalid && password.dirty" class="form-invalid-tip">
                <div *ngIf="password.errors.required">密码是必填项</div>
                <div *ngIf="password.errors.pattern">密码长度为6到20位</div>
            </div>

            <ion-item>
                <ion-label class="too-long">再次输入新密码</ion-label>
                <ion-input type="password" name="newPassword" autocomplete="off" placeholder="请输入密码（必填）"
                           [(ngModel)]="model.newPassword" #newPassword="ngModel"></ion-input>
            </ion-item>
            <div *ngIf="newPassword.dirty" class="form-invalid-tip">
                <div *ngIf="ngForm.errors?.passwordInvalid">两次密码输入不一致</div>
            </div>

        </ion-list>
        <div margin>
            <ion-button expand="block" type="submit" [disabled]="!ngForm.valid||loading">确定修改</ion-button>
        </div>
    </form>
</ion-content>